<!DOCTYPE html>
<html>
    
    <head>
        <title>接收任务页面</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <!-- Bootstrap -->
        <link href="View/FHL/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="View/FHL/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <link href="View/FHL/assets/styles.css" rel="stylesheet" media="screen">
        <link href="View/FHL/assets/DT_bootstrap.css" rel="stylesheet" media="screen">
        <link href="View/FHL/vendors/jGrowl/jquery.jgrowl.css" rel="stylesheet" media="screen">
        <link href="public/css/font-awesome.min.css" rel="stylesheet" media="screen">
        <!--[if lte IE 8]>
        <script language="javascript" type="text/javascript" src="View/FHL/vendors/flot/excanvas.min.js"></script>
        <![endif]-->
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>

        <![endif]-->
        <script src="View/FHL/vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <style>
        td{
            word-wrap:break-word;
        }
        table{
            table-layout:fixed ;
        }

    </style>
    
    <body>
    {include h}
        <div class="container-fluid">

            <div class="row-fluid">
                {include l}
                <!--/span-->
                <div class="span10" id="content">
                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">接收任务列表</div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                    <table class="table"  >
                                        <thead class="success">
                                        <tr>
                                            <th style="width: 5%">任务ID</th>
                                            <th style="width: 20%;word-wrap:break-word;">名称</th>
                                            <th style="width: 10%">任务性质</th>
                                            <th style="width: 10%">控制端口</th>
                                            <th style="width: 15%">接收IP</th>
                                            <th style="width: 10%">接收端口</th>
                                            <th style="width: 10%">模式</th>
                                            <th style="width: 5%">线程数</th>
                                            <th style="width: 5%">运行</th>
                                            <th style="width: 20%">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="table_body">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>
<!--速度统计图-->
                    <div class="row-fluid section">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">传输速度统计</div>
                                <div class="pull-right">
                                    <span class="badge badge-warning">1000</span>
                                </div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                    <div id="LineTask" style="height: 500px;"></div>
                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>
 <!--/速度统计图-->
                    <!-- set mode  -->
                    <div id="setMode" class="modal hide">
                        <div class="modal-header">
                            <button data-dismiss="modal" class="close" type="button">&times;</button>
                            <h3>设置任务参数</h3>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal form">
                                <fieldset>
                                    <div class="control-group">
                                        <label class="control-label" >名称</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="info" type="text" value="">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" >IP</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="ip" type="text" value="">
                                        </div>
                                    </div>
                                    <div class="control-group" style="display: none">
                                        <label class="control-label">端口</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="port" type="text" value="">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" >单个文件大小</label>
                                        <div class="controls">
                                            <select  name="mode"  class="chzn-select">
                                                <option value="0" >5M以上</option>
                                                <option value="1" >5M以下</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" >线程数</label>
                                        <div class="controls">
                                            <select  name="p"  class="chzn-select">
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                            </select>
                                        </div>
                                    </div>



                                    <div class="form-actions">
                                        <button type="submit" data-taskid="" class="btn btn-primary">保存</button>
                                        <button data-dismiss="modal" class="btn" >取消</button>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                    <!-- /set mode  -->

                </div>
            </div>
            <hr>
            {include f}
        </div>
        <!--/.fluid-container-->
        <link href="View/FHL/vendors/datepicker.css" rel="stylesheet" media="screen">
        <link href="View/FHL/vendors/uniform.default.css" rel="stylesheet" media="screen">
        <link href="View/FHL/vendors/chosen.min.css" rel="stylesheet" media="screen">
        <link href="View/FHL/vendors/wysiwyg/bootstrap-wysihtml5.css" rel="stylesheet" media="screen">
        <link rel="stylesheet" href="View/FHL/vendors/morris/morris.css">


        <script src="View/FHL/vendors/jquery-1.9.1.js"></script>
        <script src="View/FHL/bootstrap/js/bootstrap.min.js"></script>
        <script src="View/FHL/vendors/datatables/js/jquery.dataTables.min.js"></script>

        <script src="View/FHL/vendors/jquery.uniform.min.js"></script>
        <script src="View/FHL/vendors/chosen.jquery.min.js"></script>
        <script src="View/FHL/vendors/bootstrap-datepicker.js"></script>

        <script src="View/FHL/assets/DT_bootstrap.js"></script>
        <script src="View/FHL/vendors/wysiwyg/wysihtml5-0.3.0.js"></script>
        <script src="View/FHL/vendors/wysiwyg/bootstrap-wysihtml5.js"></script>

        <script src="View/FHL/vendors/wizard/jquery.bootstrap.wizard.min.js"></script>
		<script src="View/FHL/vendors/jGrowl/jquery.jgrowl.js"></script>

        <script src="View/FHL/assets/scripts.js"></script>

        <script src="View/FHL/vendors/raphael-min.js"></script>
        <script src="View/FHL/vendors/morris/morris.min.js"></script>

        <script src="View/FHL/assets/echarts.min.js"></script>
        <script>
            //全局变量
            var currHost="local";//默认是本地
            var taskList;//全局变量 后边都能用
            var curtaskid=0;
            var curtasklist_index=0;
            //获取任务列表
            function getTaskList() {
                $.get("{php HYBBS_URL('task','getTaskList');}",
                    {
                        currHost:currHost,
                        type:'r'
                    },
                    function(e){
                    if(e.error){
                        taskList = e.data;
                        var htmltmp = "";
                        $("#table_body").empty();
                        for(var i in taskList){
                            var classtype ;
                            if(i%2==0){
                                classtype = 'success';
                            }else {
                                classtype = 'info';
                            }
                            //任务性质
                            var RWXZ = taskList[i]['type']=='r'?'' +
                                    '<span class="badge badge-important popover-left" data-original-title="加速远传" style="text-align: center"><li class="fa fa-bolt fa-lg icon-white" ></li></span>':
                                    '<span class="badge badge-info popover-left" data-original-title="本地分发" style="text-align: center"><li class="icon icon-arrow-down icon-white"></li></span>';
                            var filemode = taskList[i]['m']==0?"常规":"5M以下小文件";
                            var run = taskList[i]['run']==1?"<li class='icon-fire'></li>":"<li class='icon-ban-circle'></li>";
                            htmltmp+=' <tr class="'+classtype+'">'+
                                    '<td style="width: 5%" >'+taskList[i]['taskid']+'</td>'+
                                    '<td style="width: 20%" >'+taskList[i]['info']+'</td>'+
                                    '<td style="width: 10%" >'+RWXZ+'</td>'+
                                    '<td style="width: 20%" >'+taskList[i]['lport']+'</td>'+
                                    '<td style="width: 20%" >'+taskList[i]['ip']+//'<span class="label label-success">1</span></td>'+
                                    '<td style="width: 20%" >'+taskList[i]['port']+'</td>'+
                                    '<td style="width: 20%" >'+filemode+'</td>'+
                                    '<td style="width: 20%" >'+taskList[i]['p']+'</td>'+
                                    '<td style="width: 20%" >'+run+'</td>'+
                                    '<td style="width: 20%" ><div class="btn-group">'+
                                        '<button class="btn btn-info btn-mini showSetMode" data-taskid="'+taskList[i]['taskid'] +'" data-taskindex='+i+'><i class="icon-wrench icon-white"></i></button>'+
                                        '<button class="btn btn-success TaskOP btn-mini" data-href="?Task/restartTask?type='+taskList[i]['type']+'&taskid='+taskList[i]['taskid']+'" > <i class="icon-play icon-white"></i> </button>'+
                                        '<button class="btn btn-warning TaskOP btn-mini" data-href="?Task/killTask?type='+taskList[i]['type']+'&taskid='+taskList[i]['taskid']+'" ><i class="icon-stop icon-white"></i></button>'+
                                        '<button class="btn btn-danger TaskOP btn-mini" data-href="?Task/deleteTask?type='+taskList[i]['type']+'&taskid='+taskList[i]['taskid']+'" > <i class="icon-trash icon-white"></i> </button>'+
                                        '<button class="btn btn-primary TaskRefresh btn-mini" data-href="?Task/getTaskLog?type='+taskList[i]['type']+'&taskid='+taskList[i]['taskid']+'" > <i class="fa fa-line-chart icon-white"></i> </button>'+
                                    '</div></td>'+
                            '</tr>';
                        }
                        $("#table_body").append(htmltmp);
                        //console.log(e.data);
                        $('.popover-left').popover({placement: 'left', trigger: 'hover'});
                        //$.jGrowl(e.info);
                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');
            }
            var speeddata=[];
            var fsizedata=[];
            var timedata=[];

            function coverLineDat(data) {
                speeddata=[];
                fsizedata=[];
                timedata=[];
                for (var i in data){
                    timedata.push(data[i]['cdt']);
                    fsizedata.push(data[i]['fsizeB']/1000/1000);
                    speeddata.push(data[i]['speedB']/1000/1000);
                }

            }

        $(function() {
            var chartDom = document.getElementById('LineTask');
            var myChart = echarts.init(chartDom);
            var option;
            getTaskList();

            $(".uniform_on").uniform();

            $('.textarea').wysihtml5();
			$('.form').submit(function() {return false;});
           // $('.tooltip-top').tooltip({ placement: 'top' });

            //编辑提交
			$(".form :submit").click(function(){
				var postdata = $(this).closest("form").serializeArray();
				postdata.push(
                    {
                        name:"taskid",
                        value: curtaskid,
                    },
                    {
                        name:"type",
                        value: taskList[curtasklist_index]['type'],
                    }
                );
				console.log(postdata);
				$.post("{php HYBBS_URL('task','editTask');}", postdata,  function(e){
					if(e.error){
							window.location.reload();
					}else{
						$.jGrowl(e.info);
					}

				},'json');

			});
            //执行任务操作命令
            $('table').on("click",'.TaskOP',
                function(ee){
                $.get($(this).data('href'),{},  function(e){
                    if(e.error){
                        $.jGrowl(e.info);
                        setTimeout(function () {
                            window.location.reload();
                        },3000);

                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');
            });
            $('table').on("click",'.TaskRefresh',
                function(e){
                    $.get($(this).data('href'),{},  function(e){
                        if(e.error){
                            coverLineDat(e.data);


                            option = {
                                title: {
                                    text: '速度曲线'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {},
                                toolbox: {
                                    show: true,
                                    feature: {
                                        dataZoom: {
                                            yAxisIndex: 'none'
                                        },
                                        dataView: { readOnly: false },
                                        magicType: { type: ['line', 'bar'] },
                                        restore: {},
                                        saveAsImage: {}
                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: timedata
                                },
                                yAxis: {
                                    type: 'value',
                                    axisLabel: {
                                        formatter: '{value} M'
                                    }
                                },
                                dataZoom: [
                                    {
                                        type: 'inside',
                                        //start: 0,
                                        //end: 20
                                    },
                                    {
                                        //start: 0,
                                        //end: 20
                                    }
                                ],
                                series: [
                                    {
                                        name: '速度',
                                        type: 'line',
                                        data: speeddata,
                                        markPoint: {
                                            data: [
                                                { type: 'max', name: 'Max' },
                                                { type: 'min', name: 'Min' }
                                            ]
                                        },
                                        markLine: {
                                            data: [{ type: 'average', name: 'Avg' }]
                                        }
                                    },
                                    {
                                        name: '大小',
                                        type: 'line',
                                        data: fsizedata,
                                        markPoint: {
                                            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                                        },
                                        markLine: {
                                            data: [
                                                { type: 'average', name: 'Avg' },
                                                [
                                                    {
                                                        symbol: 'none',
                                                        x: '90%',
                                                        yAxis: 'max'
                                                    },
                                                    {
                                                        symbol: 'circle',
                                                        label: {
                                                            position: 'start',
                                                            formatter: 'Max'
                                                        },
                                                        type: 'max',
                                                        name: '最高点'
                                                    }
                                                ]
                                            ]
                                        }
                                    }
                                ]
                            };

                            option && myChart.setOption(option);
                        }else{
                            $.jGrowl(e.info);
                        }

                    },'json');
                });
            $('table').on("click",".showSetMode",
                    function(e){
                        //console.log($(this).parent().siblings('td').text());
                        curtaskid = $(this).data('taskid');
                        curtasklist_index = $(this).data('taskindex');
                        $('#setMode').modal('show');

                        $("select[name=mode]").val(taskList[curtasklist_index]['m']).trigger("liszt:updated");
                        $("select[name=p]").val(taskList[curtasklist_index]['p']).trigger("liszt:updated");
                        $(".chzn-select").chosen();

                        $('input[name=info]').val(taskList[curtasklist_index]['info']);
                        $('input[name=ip]').val(taskList[curtasklist_index]['ip']);
                        $('input[name=port]').val(taskList[curtasklist_index]['port']);
                        if(taskList[curtasklist_index]['type']=="r"){
                            $('input[name=ip]').parent().parent().addClass("hidden");
                            $("select[name=mode]").parent().parent().removeClass("hidden");
                            $("select[name=p]").parent().parent().addClass("hidden");
                        }else {
                            $('input[name=ip]').parent().parent().removeClass("hidden");
                            $("select[name=mode]").parent().parent().addClass("hidden");//模式由
                            $("select[name=p]").parent().parent().removeClass("hidden");
                        }



                    }
            );
            
        });
        </script>
    </body>

</html>